<template>
    <footer class="footer">
      <ul>
        <router-link to="/homeIndex" tag="li">
          <span class="iconfont icon-weibiaoti--"></span>
          <p>首页</p>
        </router-link>
        <router-link to="/kindIndex" tag="li">
          <span class="iconfont icon-fenlei"></span>
          <p>分类</p>
        </router-link>
        <router-link to="/cartIndex" tag="li">
          <van-badge :content="cartsNum">
            <span class="iconfont icon-gouwuche"></span>
            <p>购物车</p>
          </van-badge>
        </router-link>
         <router-link v-if="isLogin" to="/userIndex" tag="li">
          <span class="iconfont icon-gerenzhongxin-wodexinxi"></span>
          <p>我的</p>
        </router-link>
        <router-link v-else to="/login" tag="li">
          <span class="iconfont icon-gerenzhongxin-wodexinxi"></span>
          <p>未登录</p>
        </router-link>
      </ul>
    </footer>
</template>

<script>
import Vue from 'vue'
import { Badge } from 'vant'
import { mapState } from 'vuex'

Vue.use(Badge)
export default {
  computed: {
    ...mapState({
      isLogin: state => state.user.isLogin,
      cartsNum: state => state.carts.cartsNum
    })
  },
  data () {
    return {
      user: ''
    }
  }
}
</script>
